<template>
  <div v-loading.fullscreen.lock="loading">
    <div class="box-card">
      <div class="small-title">入库信息</div>
      <div class="box-info">
        <div class="box-info-item"><span class="label">入库单号:</span> <span class="value">{{detail.billNo}}</span></div>
        <div class="box-info-item"><span class="label">客户:</span> <span class="value">{{detail.customerName}}</span></div>
        <div class="box-info-item"><span class="label">入库状态:</span> <span class="value">{{detail.billStatusDesc}}</span></div>
        <div class="box-info-item"><span class="label">创建时间:</span> <span class="value">{{detail.createTime}}</span></div>
        <div class="box-info-item"><span class="label">预计入库日期:</span> <span class="value">{{detail.estimateInDate}}</span></div>
        <div class="box-info-item"><span class="label">创建人:</span> <span class="value">{{detail.createUser}}</span></div>
        <div class="box-info-item"><span class="label">联系电话:</span> <span class="value">{{detail.contactPhone}}</span></div>
        <div class="box-info-item"><span class="label">运输方式:</span> <span class="value">{{detail.transportTypeDesc}}</span></div>
        <div class="box-info-item"><span class="label">{{detail.transportType===1?'车牌号':'船号'}}:</span> <span class="value">{{detail.plateNumber}}</span></div>
      </div>
    </div>
    <div class="box-card">
      <div class="small-title">货品信息</div>
      <el-form label-width="110px" label-position="right" size="small" ref="form" :model="detail" :rules="formRules">
        <div class="box-form small-form-item" v-for="(item, index) in detail.goodInfos" :key="index">
          <el-form-item label="货品名称/重量">
            <div class="text">{{item.goodsName}} {{item.goodsCount}}{{item.goodsCountUnit}}</div>
          </el-form-item>
          <el-form-item label="实际入库重量" :prop="`goodInfos[${index}].actualGoodsCount`" :rules="formRules.actualGoodsCount">
            <el-input placeholder="请输入实际入库重量" v-model="item.actualGoodsCount" maxlength="10">
              <template #append>吨</template>
            </el-input>
          </el-form-item>
          <el-form-item label="入库罐号" :prop="`goodInfos[${index}].tankId`" :rules="formRules.tankId">
            <el-select clearable placeholder="请选择入库罐号" v-model="item.tankId">
              <el-option v-for="tank in tankList" :key="tank.id" :disabled="isTankDisabled(item, tank)" :label="tank.tankNo" :value="tank.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="btns">
      <el-button size="small" @click="router.push({name: 'oilDepotInStore'})">取消</el-button>
      <el-button size="small" class="fill" :disabled="disabled" type="primary" @click="save">入库</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { getOilDepotInStoreDetail, confirmOilDepotInStoreBill } from '@/api/oilDepotInStore'
import { queryTankNoByWarehouseId } from '@/api/common'
import { useRoute, useRouter } from 'vue-router'
import { defineComponent, ref, reactive, getCurrentInstance, computed } from 'vue'

export default defineComponent({
  name: 'operation',
  setup () {
    const { proxy } = getCurrentInstance()
    let loading = ref(false)
    let detail = ref({})
    let tankList = ref([])
    let formRules = reactive({
      actualGoodsCount: [
        { required: true, message: '请输入实际入库重量', trigger: 'change' },
        { required: true, pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/, message: '正数且最多2位小数', trigger: 'change' }
      ],
      tankId: { required: true, message: '请选择出库罐号', trigger: 'change' }
    })
    const route = useRoute()
    const router = useRouter()
    const getInfo = async () => {
      const { id } = route.query
      loading.value = true
      const { code, result } = await getOilDepotInStoreDetail({ id })
      loading.value = false
      if (code !== 200) return
      getTankNoByWarehouseId(result.warehouseId)
      detail.value = result
    }
    getInfo()
    const getTankNoByWarehouseId = async (warehouseId) => {
      const { code, result } = await queryTankNoByWarehouseId({ warehouseId })
      if (code !== 200) return
      tankList.value = result
    }
    let disabled = ref(false)
    const save = () => {
      proxy.$refs.form.validate(async (valid) => {
        if (!valid) return
        try {
          const { goodInfos, id } = detail.value
          const goods = goodInfos.map(({ id: goodsId, tankId, actualGoodsCount: goodsCount }) => {
            return { goodsId, tankId, goodsCount }
          })
          disabled.value = true
          const { code } = await confirmOilDepotInStoreBill({ goods, billId: id })
          if (code !== 200) return
          proxy.$message.success('操作成功')
          router.push({ name: 'oilDepotInStore' })
        } finally {
          disabled.value = false
        }
      })
    }
    const isTankDisabled = computed(() => {
      return function ({ goodsName }, curr) {
        return goodsName !== curr.goodsName
      }
    })
    return { loading, detail, router, tankList, formRules, save, disabled, isTankDisabled }
  }
})

</script>

<style scoped lang="less">
  @import url('@/assets/css/label-value.less');
  @import url('@/assets/css/form-box.less');

  .btns {
    padding: 70px 0 0 0px;
    display: flex;
    justify-content: center;
    button {
      width: 120px;
      height: 40px;
      border-radius: 4px;
      font-size: 16px;
      line-height: 22px;
      color: #666666;
      background: #FFFFFF;
      border: 1px solid #CCCCCC;
    }
    .fill {
      background: #4B7EFE;
      color: #ffffff;
      border: none;
      &:hover {
        background: #66b1ff;
      }
    }
    .el-button + .el-button {
      margin-left: 44px;
    }
  }
  .small-form-item {
    .el-form-item {
      margin-left: 0!important;
    }
  }
</style>
